import React, { Component, Fragment } from "react";
// propTypes
import PropTypes from 'prop-types';
// antd
import{ Table, Row, Col, Button, Pagination, Spin } from "antd";

class TableBasis extends Component {
    render(){
        const { columns, dataSource, total, changePageCurrent, changePageSize, 
            batchButton, batchRenewButton, batchStatusButton, handlerRenewEcs,
            handlerDelete, handlerChangeStatus, rowSelection, 
            rowkey, loadingTable, expandable 
        } = this.props;
        console.log('tableBasic comp====>', this.props)
        const hasSelected = rowSelection.selectedRowKeys.length > 0;
        return (
            <Fragment>
                <Spin spinning={loadingTable} tip="Loading...">
                    <Table 
                        pagination={false} 
                        rowKey={rowkey} 
                        rowSelection={rowSelection} 
                        columns={columns} 
                        dataSource={dataSource} 
                        scroll={{ y: 520 }} 
                        size='middle' 
                        expandable={expandable}
                        onRow={record => {
                            return {
                                onMouseEnter: event => {console.log(1111)}
                            }
                        }}
                    />
                </Spin>
                <div className="spacing-30"></div>
                <Row>
                    <Col span={8}>
                        { batchButton && <Button onClick={handlerDelete} disabled={hasSelected ? false : true}>批量操作</Button> }
                        { batchRenewButton && <Button onClick={handlerRenewEcs} disabled={hasSelected ? false : true}>批量续费</Button> }
                        { batchStatusButton && <Button onClick={handlerChangeStatus} disabled={hasSelected ? false : true}>变更状态</Button> }
                        <span style={{ marginLeft: 8 }}>
                            {hasSelected ? `已选中 ${rowSelection.selectedRowKeys.length} 条` : ''}
                        </span>
                    </Col>
                    <Col span={16}>
                        <Pagination
                            size="small"
                            onChange={changePageCurrent}
                            onShowSizeChange={changePageSize}
                            className="pull-right"
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `共 ${total} 条`}
                        />
                    </Col>
                </Row>
            </Fragment>
        )
    }
}
// 校验数据类型
TableBasis.propTypes = {
    columns: PropTypes.array,
    dataSource: PropTypes.array,
    total: PropTypes.number,
    changePageCurrent: PropTypes.func,
    changePageSize: PropTypes.func,
    batchButton: PropTypes.bool,
    batchRenewButton: PropTypes.bool,
    rowSelection: PropTypes.object,
    rowkey: PropTypes.string
}
// 默认
TableBasis.defaultProps = {
    column: [],
    dataSource: [],
    total: 0,
    batchButton: true,
    batchRenewButton: false,
    rowkey: "id"
}

export default TableBasis;